<template>
    <div class="addAddress">
        <vheader :is-left="true" title="新增地址"/>
        <!-- 添加地址 -->
        <div class="viewbody">
            <div class="content">
                <formBlock label="联系人" placeholder="姓名" :tags="sexs" @checkSex="checkSex"
                :sexs="addressInfo.sex" v-model="addressInfo.name"/>
                <formBlock label="电话" placeholder="手机号码" v-model="addressInfo.phone"/>
                <formBlock label="地址" placeholder="小区/写字楼/学校等" icon="angle-right" @click="showSearch=true" v-model="addressInfo.address"/>
                <formBlock label="门牌号" placeholder="10号楼5层501室222" icon="edit" v-model="addressInfo.bottom"/>
                <div class="formblock">
                    <div class="label-wrap">标签</div>
                    <tabTag :tags="tags" @checkTag="checkTag" :selectTag="addressInfo.tag"/>
                </div>
            </div>
            <!-- 确定按钮 -->
            <div class="form-button-wrap">
                <div class="form-button" @click="saveAddress">确定</div>
            </div>
        </div>

        <!-- 搜索地址 -->
        <addressSearch :showSearch="showSearch" @close="showSearch=false" :addressInfo="addressInfo"/>
    </div>
  </template>

<script>
    import axios from 'axios';
    import vheader from "../../components/vheader.vue";
    import formBlock from "../../components/Order/formBlock.vue";
    import tabTag from "../../components/Order/tabTag.vue";
    import addressSearch from "../../components/Order/addressSearch.vue";
    import {
        Toast
    } from 'mint-ui';
    export default {
        name: 'addAddress',
        data() {
            return {
                tags: ['家', '学校', '公司'],
                sexs: ["先生", "女士"],
                addressInfo: {
                    tag: "",
                    sex: "",
                    address: "",
                    name: "",
                    phone: "",
                    bottom: "",
                },
                showSearch: false,
            }
        },
        components: {
            vheader,
            formBlock,
            tabTag,
            addressSearch,
        },
        methods: {
            checkTag(item) {
                this.addressInfo.tag = item;
            },
            checkSex(item) {
                this.addressInfo.sex = item;
                console.log(item);
            },
            saveAddress() {
                console.log(this.addressInfo);
                let addData = {
                        "name": this.addressInfo.name,
                        "address": this.addressInfo.address,
                        "sex": this.addressInfo.sex,
                        "u_phone": this.addressInfo.phone,
                        "tag": this.addressInfo.tag,
                    }
                    // 把用户的收货地址往vuex存
                this.$store.commit('shouhuoAddressFn', this.addressInfo);
                // 发送请求，往数据库存
                axios.post('http://joeweiwx.xyz:8005/saveAddress', addData)
                if (!this.addressInfo.name) {
                    this.showMsg("请输入联系人");
                    return;
                }
                if (!this.addressInfo.phone) {
                    this.showMsg("请输入手机号码");
                    return;
                }
                if (!this.addressInfo.address) {
                    this.showMsg("请选择地址，如没有出现搜索的内容请允许获取定位呢");
                    return;
                };
                this.$router.push('/myAddress');

            },
            // 点击确定按钮后判断用户哪些没填
            showMsg(msg) {
                Toast({
                    message: msg,
                    position: 'bottom',
                    duration: 2000
                });
            },
        }
    }
</script>
<style scoped>
    .addAddress {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-top: 45px;
    }
    
    .viewbody {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        background-color: #f5f5f5;
    }
    
    .content {
        padding-left: 4vw;
        background: #fff;
        font-size: 0.94rem;
    }
    
    .formblock {
        background-color: #fff;
        border-bottom: 1px solid #eee;
        display: flex;
    }
    
    .formblock .label-wrap {
        flex-basis: 17.333333vw;
        padding: 3.733333vw 0;
        line-height: 4.8vw;
        color: #333;
        font-weight: 700;
    }
    /* 确定按钮 */
    
    .form-button-wrap {
        padding: 5.333333vw 4vw;
        display: flex;
    }
    
    .form-button-wrap .form-button {
        background: #00d762;
        text-align: center;
        border-radius: 0.533333vw;
        flex: 1;
        font-size: 1.1rem;
        line-height: 5.066667vw;
        color: #fff;
        padding: 3.333333vw 0;
        border: none;
        font-weight: 500;
    }
</style>font-weight: 500; }
</style>